<template>
  <div>
    <h1>playground - scrollbar</h1>
    <!-- scrollbar 包裹住要添加滚动条的元素
      百度查找样式怎么处理
      1. 把我们需要展示滚动条的内容包裹
      2. 修改样式
          .el-scrollbar {
            width: 100%; // 宽度可以设置也可以不设置 因为宽度默认就是填充满父级元素的内容区
            height: 100%; // 必须设置el-scrollbar的高度
            .el-scrollbar__wrap { // 实际上我们的内容是放在这个div下面的
              // height: 100%; // 渲染出来的div.el-scrollbar__wrap默认会添加height:100%的属性。我们可以设置为105%来隐藏元素水平滚动条
              height: 100%;
              overflow: scroll;
              overflow-x:auto;
            }
          }
     -->
    <div class="wrap">
      <el-scrollbar>
        <p v-for="item in 100" :key="item">test</p>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: ''
    }
  }
}
</script>

<style lang="scss" scoped>
div.wrap {
  width: 500px;
  height: 500px;
  background-color: pink;
  // overflow: hidden;
  ::v-deep {
    .el-scrollbar {
      width: 100%; // 宽度可以设置也可以不设置 因为宽度默认就是填充满父级元素的内容区
      height: 100%; // 必须设置el-scrollbar的高度
      .el-scrollbar__wrap { // 实际上我们的内容是放在这个div下面的
        // height: 100%; // 渲染出来的div.el-scrollbar__wrap默认会添加height:100%的属性。我们可以设置为105%来隐藏元素水平滚动条
        height: 100%;
        overflow: scroll;
        overflow-x:auto;
      }
      .el-scrollbar__thumb {
        background-color: gold !important;
      }
    }
  }
}
// .el-scrollbar__wrap{
//   overflow-x: hidden;
// }
</style>
